<template>
    <div>
        <h2>G6 基础用法</h2>
        <!-- 图渲染容器 -->
        <div ref="container" style="width:100%;height:400px;background:#f5f5f5;"></div>
    </div>
</template>
<script lang="ts">
// 组件名定义，符合多单词规范
export default { name: 'AntvG6Demo1' };
</script>
<script setup lang="ts">
// 引入 Vue 的响应式和生命周期
import { ref, onMounted } from 'vue';
// 引入 G6 图可视化库
import * as G6 from '@antv/g6';
// 定义容器 DOM 的 ref
const container = ref();
// 组件挂载后初始化 G6 图实例
onMounted(() => {
    const graph = new G6.Graph({
        container: container.value, // 挂载的 DOM 节点
        width: 600, // 画布宽度
        height: 400, // 画布高度
        // @ts-ignore 忽略 modes 类型警告（G6 5.x 推荐 behaviors）
        modes: { default: ['drag-node'] }, // 支持节点拖拽
        layout: { type: 'random' }, // 随机布局
        data: {
            // 节点数据，包含 id、label、初始坐标
            nodes: [
                { id: 'node1', label: '节点1', x: 100, y: 200 },
                { id: 'node2', label: '节点2', x: 300, y: 200 },
                { id: 'node3', label: '节点3', x: 200, y: 100 },
                { id: 'node4', label: '节点4', x: 400, y: 300 },
                { id: 'node5', label: '节点5', x: 500, y: 150 },
                { id: 'node6', label: '节点6', x: 350, y: 350 },
                { id: 'node7', label: '节点7', x: 150, y: 350 }
            ],
            // 边数据，source/target 指定连接的节点，label 为边标签
            edges: [
                { source: 'node1', target: 'node2', label: '连线1-2' },
                { source: 'node2', target: 'node3', label: '连线2-3' },
                { source: 'node3', target: 'node4', label: '连线3-4' },
                { source: 'node4', target: 'node5', label: '连线4-5' },
                { source: 'node5', target: 'node6', label: '连线5-6' },
                { source: 'node6', target: 'node7', label: '连线6-7' },
                { source: 'node7', target: 'node1', label: '连线7-1' },
                { source: 'node1', target: 'node4', label: '连线1-4' },
                { source: 'node2', target: 'node5', label: '连线2-5' },
                { source: 'node3', target: 'node6', label: '连线3-6' }
            ]
        }
    });
    // 渲染图
    graph.render();
});
</script> 